<template>
    <div>
        <div class="home-left">
            <div class="home-left-title">园区今日固废运输监控</div>
            <div class="home-left-input">
                <el-input placeholder="请输入车牌号码"
                          prefix-icon="el-icon-search"
                          class="_input"></el-input>
            </div>
            <el-table class="home-left-table"
                      :data="aTable"
                      stripe
                      style="width: 100%"
                      @row-click="fGetInfo">
                <el-table-column prop="carnumcor"
                                 label="车牌号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="monitortime"
                                 label="监控时间"
                                 align="center">
                </el-table-column>
            </el-table>
            <!-- 分页条 -->
            <div class="home-pagebar">
                <wiv-pagebar ref="pagebar"
                             v-bind="oOpts"
                             @after-flip="fAfterFlip"></wiv-pagebar>
            </div>
        </div>
    </div>
</template>

<script>
    import { URLS_SY } from '@/urls.js';
    export default {
        data() {
            return {
                oOpts: {//分页组件条件
                    toolTxts: ['<', '', '>'],
                    render: ['<->', 'prev', 'page', 'next', '<->'],
                    visiblePages: 4,
                },
                aTable: [],//表格数据
                oTable: {}
            }
        },
        mounted() {
            this.$refs.pagebar.fReset({ // 园区今日固废运输监控分页
                url: URLS_SY.d_getYqjrgfqysjk
            });
        },
        beforeDestroy() {
        },
        methods: {
            fAfterFlip(aData, oPageApi) { //分页组件回调
                this.aTable = aData;
            },
            fGetInfo(row) { //表格行数据
                this.oTable = row
                this.$EventBus.$emit('fViewReceive', 'showPoint', this.oTable)
            }
        }
    }
</script>

<style lang="less" rel="stylesheet" scoped>
    .home-left {
        position: relative;
        width: 221px;
        height: 870px;
        background-color: #ffffff;
        border-radius: 8px;
        z-index: 2;
    }
    .home-left-title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        color: #0f6ac9;
        font-size: 16px;
        font-weight: bold;
    }
    .home-left-input {
        padding: 5px 3.5px;
        border-top: 1px solid #ecedef;
        border-bottom: 1px solid #ecedef;
    }
    .home-left-table {
        height: 740px;
        //height: 100%;
    }
    /deep/.el-input {
        box-shadow: 0 8px 16px rgba(201, 201, 201, 0.6);
        z-index: 2;
    }
    /deep/.el-input__inner {
        border: 1px solid #2c75cd;
    }
    /deep/.el-table__row {
        height: 54px;
    }
    /deep/.el-table tr th.el-table__cell.is-leaf {
        color: #2980b9;
        background-color: #ffffff;
        font-size: 14px;
        border: none;
    }
    /deep/.el-table tr td.el-table__cell {
        color: #333333;
        border-top: 1px solid #ecedef;
        border-bottom: 1px solid #ecedef;
        border-left: none;
        border-right: none;
    }
    .home-pagebar {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 14.2px;
        width: 221px;
    }
    /deep/.wiv-pagebar-item {
        height: 23px;
    }
    /deep/.wiv-pagebar-link {
        min-width: 23px;
        line-height: 23px;
    }
</style>
